<template>
    <div>
        <el-card class="box-card" :body-style="{padding:0,width:'180',display:'flex'}">
            <div class="left_icon" :style="{'background-color': bgc}">
                <i :class="icon"></i>
            </div>
            <div class="right_content">
                <div class=" num">
                    {{mynum}}
                </div>
                <div class="text">
                    {{title}}
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        props: ["icon", "num", "title", "bgc"],
        data() {
            return {
                mynum: 0,
                timer: null
            }
        },
        created() {
            this.timer = setInterval(() => {
                if (this.mynum < this.num) {
                    if (this.num - this.mynum > 600) {
                        this.mynum += 30
                    } else if (this.num - this.mynum > 200) {
                        this.mynum+=10
                    }else {
                        this.mynum += 1
                    }
                } else {
                    clearInterval(this.timer)
                }
            }, 1)

        }
    }
</script>

<style scoped lang="scss">
    .box-card {
        width: 180px;
        user-select: none;
    }

    .left_icon {
        width: 50px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
            color: #fff;
            font-size: 40px;
        }
    }

    .right_content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .num {
            font-size: 45px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 5px;
            box-sizing: border-box;
        }

        .text {
            display: flex;
            justify-content: center;
            flex: 1;
        }
    }
</style>